昨天我們把 HTML 的骨架和圖層結構梳理好了,不過打開瀏覽器一看一定會覺得好像就只是把文字、圖片甚麼的放上去，好像毫無美感可言。接下來今天這篇將是幫網頁大改造的一篇，也是跟我們設計師比較相關的一篇——我們要來介紹 CSS（階層式樣式表） 啦！

如果說 HTML 是網頁的鋼筋骨架,那 CSS 就是網頁的油漆、壁紙、甚至是穿搭衣櫃。在 Figma 裡我們習慣調整填色（Fill）、邊框（Stroke）和字型大小,在 CSS 裡其實也完全是一樣的邏輯。

CSS 的基本長相：「誰」要變成「什麼樣子」？

寫 CSS 非常直覺,它主要由兩個部分組成：選擇器（Selector）跟 宣告（Declaration）

/* 選擇器：選中網頁上的所有 p 標籤（段落文字） */
p {
    color: #333333;       /* 文字顏色 */
    font-size: 16px;      /* 字型大小 */
    line-height: 1.6;     /* 行高 */
}

1. 選擇器（p）：就像你在 Figma 框選了某個圖層,告訴瀏覽器：「我要對這個標籤下手！」
2. 屬性與數值（color: #333333;）：就像你在右側面板調整的數值欄位,決定它的顏色、大小或粗細。每個屬性後面都要加上分號 (;) 做結尾。

常用的選擇器:怎麼精準選到自己想要的目標

在寫網頁時,不可能每次都把同一個標籤全改掉。這時候我們就需要像 Figma 命名圖層一樣,為它們加上身分證：

• 標籤選擇器:直接用標籤名字（例如:h1、p、a）,會影響頁面上所有同類型的標籤
• 類別選擇器:在 HTML 幫標籤取名字（例如:<p class="intro">）,在 CSS 裡用點開頭來選取（.intro）。這就像是在 Figma 裡幫圖層好好命名,專門控制特定物件
• ID選擇器:用井號開頭（#main-title）,代表全頁面獨一無二的專屬標記

今日小結

今天我們跨出了視覺美化的第一步,用 CSS 幫只有簡單文字與圖片，光溜溜的 HTML 骨架上了妝、調配了好看的字型與顏色。

有了基礎的樣式概念後,明天我們就要正式來面對設計師心中永遠的痛——讓排版不再歪掉的「Box Model 盒模型」！我們明天見囉！